const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname, './dist')
    },
    module: {
        rules: [
            /*
                js兼容性处理：babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
                1. 基本js兼容性处理 --> @babel/preset-env
                    问题：只能转换基本语法，如promise高级语法不能转换
                2. 全部js兼容性处理 --> @babel/polyfill  
                    问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
                3. 需要做兼容性处理的就做：按需加载  --> core-js
            */
            
            /**
             * 1.0低版本浏览器不能兼容
             */
            // {
            //     test: /\.js$/,
            //     exclude: 'node_modules',
            //     loader: 'babel-loader'
            // },
            /**
             * 1.1兼容一些低版本但一些高级语法还兼容不了
             */
            // {
            //     test: /\.js$/,
            //     exclude: 'node_modules',
            //     loader: 'babel-loader',
            //     options: {
            //         // 预设：指示babel做怎么样的兼容性处理
            //         presets: [
            //             '@babel/preset-env'
            //         ]
            //     }
            // },

            /**
             * 2
             * 将所有高级非高级语法都打包进去，避免不兼容；打包后文件太大
             * 在js文件第一行引入@babel/polyfill 插件
             * cnpm i -D @babel/polyfill
             * import '@babel/polyfill'
             */

            /**
             * 3 使用core-js 做按需加载避免文件体积过大
             * cnpm install -D core-js
             */
             {
                test: /\.js$/,
                include:[
                    resolve(__dirname,'./src')
                ],
                loader: 'babel-loader',
                options: {
                  // 预设：指示babel做怎么样的兼容性处理
                  presets: [
                    [
                      '@babel/preset-env',
                      {
                        // 按需加载
                        useBuiltIns: 'usage',
                        // 指定core-js版本
                        corejs: {
                          version: 3
                        },
                        // 指定兼容性做到哪个版本浏览器
                        targets: {
                          chrome: '60',
                          firefox: '60',
                          ie: '9',
                          safari: '10',
                          edge: '17'
                        }
                      }
                    ]
                  ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    devServer: {
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
    }
}